<template>
  <div>
    <circle @click="addOther" :data="state.data" :x="300" :y="300" :r="200"></circle>
    <rect :data="state.data" :x="300" :y="300" :r="200"></rect>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive,onMounted } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      data: [
        { name: "语文", count: 100, color: "red" },
        { name: "数学", count: 30, color: "yellow" },
        { name: "英语", count: 50, color: "blue" },
        { name: "历史", count: 60, color: "pink" },
        { name: "政治", count: 25, color: "green" },
        { name: "体育", count: 110, color: "orange" },
      ],
    });
    onMounted(()=>{
      console.log(state.data)
      // setTimeout(() => {
      //   state.data.push({ name: "其他", count: 55, color: "blank" })
      // }, 1);
    })
    const addOther = () => {
      state.data.push({ name: "其他", count: 55, color: "#eee" })
    }
    return { state, addOther };
  },
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

a.nav-link {
  &.router-link-active {
    // color: #42b983;
    font-weight: 600;
    color: #fff !important;
    background-color: transparent;
  }
}

.hw-16 {
  height: 16px;
  width: 16px;
}

.bd-navbar {
  min-height: 4rem;
  background-color: #7952b3;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-bd-download {
  font-weight: 600;
  color: #ffe484;
  border-color: #ffe484;
}

.seize-seat {
  min-height: 4rem;
  width: 100%;
}
</style>
